<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.outer{
				border: 10px red solid;
				
				/*
				 * 开启BFC（block formatting context）块级格式化环境
				 *   BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
				 *   开启BFC该元素会变成一个独立的布局区域
				 * -开启BFC的特点：
				 *      1.开启后元素不会被浮动的元素所覆盖
						 * 2.开启后元素子元素和父元素外边距不会重叠
						 * 3.开启后元素可以包含浮动的子元素
				
					可以通过一些方式来开启元素的BFC
					1.设置元素的浮动  float（不推荐）
					2.将元素设置为行内块元素 display：inline-block（不推荐）
					3.将元素的overflow设置为一个非visible的值
					   -常用的方式  伪元素设置overflow：hidden 开启其BFC 以使其可以包含浮动元素
					   
					
					
				
				
				 */
			 overflow:hidden;
				
			
			}
			.inner{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				/*
				 高度塌陷的问题
				     在浮动布局中，父元素的默认高度是被子元素撑开的，
				       当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离
				       将会无法撑起父元素的高度，导致父元素高度丢失
				       
				       * 父元素高度丢失以后，其他的元素会自动上移，导致页面的布局混乱
				       * 
				       * 所以高度塌陷就是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理*/
			float:left;
			}
			.box{
				height: 200px;
				background-color: pink;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="inner"></div>
		</div>
		<div class="box"></div>
	</body>
</html>
